<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>表单</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">

		<link rel="stylesheet" href="__STATIC__/plugins/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="__CSS__/v1.css" media="all" />
		<link rel="stylesheet" href="__STATIC__/plugins/font-awesome/css/font-awesome.min.css">

		<link rel="stylesheet" type="text/css" href="__JS__/webuploader/webuploader.css">

		<script type="text/javascript">
			var SYS		= {'root':'__STATIC__'},
				CONFIG	= {$pageConfig};
		</script>

	</head>

	<body>
		<div id="admin-page">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
				<legend>新增产品展示</legend>
			</fieldset>

			<form class="layui-form" action="" style="max-width:1200px;">
			<input type="hidden" name="id" value="{$data.id}">
				<div class="layui-form-item">
					<label class="layui-form-label">页面标题</label>
					<div class="layui-input-block">
						<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="输入产品页面标题，正式化。" class="layui-input" value="{$data.title}">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">页面分类</label>
					<div class="layui-input-block">
						<select  lay-verify="category" name="category_id" lay-filter="fenlei" data-value='{$data.category_id}'>
						<option value="">请选择分类</option>
						{volist name="cateData" id="vo"}
						<option value="{$vo.id}">{$vo.title}</option>
						{notempty name="vo.son"}
						{volist name="vo.son" id="vo"}
						<option value="{$vo.id}">|---- {$vo.title}</option>
						{/volist}
						{/notempty}
						{/volist}
						</select>
					</div>
				</div>

				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label"><p>产品简介</p><p>Description</p></label>
					<div class="layui-input-block">
						<textarea placeholder="请输入内容" class="layui-textarea" name="description">{$data.description}</textarea>
					</div>
				</div>

				<div class="layui-form-item">
<!-- 					<label class="layui-form-label">作者</label>
<div class="layui-input-inline">
	<input type="text" name="author" placeholder="请输入" autocomplete="off" class="layui-input">
</div> -->
					<label class="layui-form-label">产品年份</label>
					<div class="layui-input-inline">
						<select name="order_year" data-value="{$data->product->order_year}">
							<option value="">请选择年份</option>
							<option value="2015">2015</option>
							<option value="2016">2016</option>
							<option value="2017">2017</option>
							<option value="2017">2018</option>
						</select>
					</div>
				</div>

 
				<div class="layui-form-item">
					<label class="layui-form-label">缩略图</label>
					<div class="layui-input-inline" id="thumb-upload">
					<div class="thumb">
						<img data-thumb-id="thumb-1" src="{$data.thumbnail?$data.thumbnail:''}">
					</div>
					<input type="file" name="thumb" class="layui-upload-file">
					<input type="hidden" name="thumbnail" value="{$data.thumbnail}">
					</div>
				</div>




				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">编辑器</label>
					<div class="layui-input-block">
						<textarea class="layui-textarea" name="content">{$data->product->content}</textarea>
						<!-- <textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="LAY_editor">{$data->product->content}</textarea> -->
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button type="button" class="layui-btn" lay-submit="" lay-filter="subform">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</div>
		<script type="text/javascript" src="__STATIC__/plugins/layui/layui.js"></script>
		<script type="text/javascript" src="__STATIC__/admin/js/admin.js"></script>

		<script>
			layui.use(['form', 'layedit', 'laydate','jquery','upload'], function() {
				var form = layui.form(),
					layer = layui.layer,
					layerTips = parent.layer === undefined ? layui.layer : parent.layer,
					layedit = layui.layedit,
					laydate = layui.laydate,
					$ = layui.jquery;

				//默认选中
				$('select').each(function(){
					that = $(this);
					that.find('option[value='+that.data('value')+']').attr('selected','selected');
				});
				form.render('select');

				//创建一个编辑器
				var editIndex = layedit.build('LAY_editor');
				//自定义验证规则
				form.verify({
					title: function(value) {
						if(value.length < 5) {
							return '标题至少得5个字符啊';
						}
					},
					category: function(value) {
						if(value == '0') {
							return '必须选择分类';
						}
					},
					content: function(value) {
						
						layedit.sync(editIndex);

						if(value.length <10)
						{
							return '内容过少';
						}
					}
				});


				layui.upload({
				  url: '/admin/index/layUp/'
				  ,success: function(res){
				    console.log(res); //上传成功返回值，必须为json格式
				    $('img[data-thumb-id]').attr('src',res.uri);
				    $('input[name=thumbnail]').val(res.uri);

				  }
				});

				console.log(parent.tab.getCurrentTabId());

				form.on('submit(subform)', function(data) {
					//保存界面
					var index = 0;
					//ajax 提交信息
					$.ajax({
						type:"POST",
						url : CONFIG.up_url,
						data:data.field,
						async:true,
						beforeSend:function(){
							index = (layerTips.load(0, {time: 10*1000,shade:[0.8,'#393D49']}));
						},
						success:function(data){
							layerTips.close(index);
							if(data.code == 1){
								//layerTips.msg(data.msg);
								//刷新本界面
								//location.reload();
								//关闭TAB卡
								
								layerTips.msg(data.msg, {
								  time: 0 //不自动关闭
								  ,btn: ['关闭页面', '取消']
								  ,yes: function(index){
								  	layerTips.close(index);
								  	parent.tab.close();
								    
								  }

								});
							}else{
								layerTips.msg(data.msg);
							}


						},
						error:function(){
							layerTips.close(index);
							console.log('没有回传数据');
						}
					});

					//阻止表单跳转
					return false;
				});

			});

		</script>

	</body>

</html>